<template>
	<view class="box-c pay">
		<view class="box d-jc-sb tittl-1">
			<view class="">充值数额</view>
			<view class="">1元=1积分</view>
		</view>
		<view class="tittl-2 box d-jc-c">
			<input :maxlength=moneyMaxLeng @input="oninput" class="pay-input uni-input" type="digit" v-model="num" />
		</view>
		<view class="box d-f-wrap tittl-3">
			<view class="num box-c d-ac-c d-jc-c" :class="acIndex==index? 'numActive' :'numNotActive'"
				v-for="(item ,index) in chooseData" @tap="payMoney(index,item)">
				<text>{{item.name}}</text>
				<text v-if="item.value ==num">
					<text class="choose">
					</text>
					<text class=" iconfont iconxuanze">
					</text>
				</text>
				<text>￥ {{item.value}}</text>
			</view>

		</view>
		<view class="tittl-4">
			选择支付方式
		</view>
		<view class="box-c tittl-5">
			<view @tap="payway(0)" class="box d-jc-sb tittl-5-payway"
				:class="active && index==0 ? 'activePayWay':'noActivePayWay'">
				<view class="flex-2 box-c d-jc-c">
					<text>
						<text class="iconfont iconweixinzhifu pay-icon"></text>
						<text :class="active && index==0 ? 'activeColor':'notColor'">微信支付</text>
					</text>
				</view>
				<view class="flex-1 box-c d-jc-c">
					<text class="iconfont iconduihao" :class="active && index==0 ? 'activeColor':'notColor'">

					</text>
				</view>
			</view>
			<view @tap="payway(1)" class="box d-jc-sb tittl-5-payway"
				:class="active && index==1 ? 'activePayWay':'noActivePayWay'">
				<view class="flex-2 box-c d-jc-c">
					<text class="box ">
						<text class="iconfont iconzhifubaozhifu1 pay-icon"></text>
						<text :class="active && index==1 ? 'activeColor':'notColor'">支付宝支付</text>
					</text>
				</view>
				<view class=" flex-1 box-c d-jc-c ">
					<text class="iconfont iconduihao" :class="active && index==1 ? 'activeColor':'notColor'">
					</text>
				</view>
			</view>

		</view>
		<view class="tittl-6 box d-ac-c">
			<button type="default" @tap='submitPay'>立即充值</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: true,
				index: -1,
				acIndex: 0,
				num: 10,
				moneyMaxLeng: 8,
				chooseData: [{
						name: '10积分',
						value: 10
					},
					{
						name: '50积分',
						value: 50
					},
					{
						name: '100积分',
						value: 100
					},
					{
						name: '200积分',
						value: 200
					},
					{
						name: '300积分',
						value: 300
					},
					{
						name: '500积分',
						value: 500
					},

				]


			}
		},
		onBackPress() {
			uni.$emit("carData", 1) //控制订单页面

		},

		methods: {
			oninput(e) {},
			payway(index) {
				this.index = index
			},
			payMoney(index, chooseData) {
				// this.acIndex = index
				this.num = chooseData.value
				console.log(this.num)

			},


			submitPay() {
				let _this = this
				if (this.index == -1) {
					uni.showToast({
						title: '请选择支付方式',
						duration: 2000,
						icon: "none"
					})
					return
				}
				if (this.index == 1) {
					uni.showToast({
						title: '暂未开通，请选择其他支付方式',
						duration: 2000,
						icon: "none"
					})
					return
				}
				var reg =
					/(^[1-9](\d+)?(\.\d{1,2})?$)|(^[1-9]$)|(^\d\.[1-9]{1,2}$)|(^\d\.[0]{1}[1-9]{1}$|(^\d\.[1-9]{1}[0]{1}$)$)/;
				if (reg.exec(_this.num)) {
					console.log('验证通过');
				} else {
					uni.showToast({
						title: "输入金额不正确",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				console.log(_this.num)

				uni.showModal({
					title: '支付',
					content: '确认支付？',
					success: function(res) {
						if (res.confirm) {
							console.log("=============" + _this.num)

							_this.$api.topUpIntegral({
								newPoints: Number(_this.num)
							}).then((res) => {
								console.log(JSON.stringify(res.data.dataMap))

								uni.requestPayment({
									provider: "wxpay",
									orderInfo: res.data.dataMap,
									success(res) {
										uni.showToast({
											title: "充值成功",
											duration: 1500,
										});
										setTimeout(function() {
											uni.switchTab({
												url: '../user/user'
											})
										}, 1700);

									},
									fail(e) {
										console.log(e)
										uni.showToast({
											title: "充值失败",
											duration: 2000,
											icon: 'none',
										});
										// plus.nativeUI.alert(JSON.stringify(e), function() {

										// }, "提示", "关闭")

									}
								})

							})
						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: "none"
							})
						}
					}
				});
				// uni.getProvider({
				//     service: 'payment',		//获取服务供应商
				//     success: (res)=> {
				//         console.log(res.service)	//服务类型：payment
				// 		console.log(res.provider)	//不同服务类型下可能的取值：["alipay","wxpay"]
				// 		if(res.provider.indexOf('wxpay')){

				// 		}else{
				// 			uni.showToast({
				// 				title: '请安装微信客户端后重试！',
				// 				duration: 2000,
				// 				icon: "none"
				// 			})
				// 		}
				//     }
				// });



			}



		}
	}
</script>

<style>
	.tittl-6 button {
		width: 600rpx;
		border-radius: 50rpx;
		background-color: #FF5551;
		color: #FFFFFF;
	}

	.tittl-6 {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50rpx;
		margin: auto;

	}

	.iconxuanze {
		position: absolute;
		right: 0px;
		bottom: -12rpx;
		font-size: 5rpx;
		color: #FFFFFF !important;
	}

	.notColor {
		color: #adadad;
	}

	.activeColor {
		color: #FF5551 !important;
	}

	.activePayWay {
		border: solid 2rpx #FF5551;
	}

	.noActivePayWay {
		border: solid 2rpx #adadad;
	}

	.iconduihao {
		font-size: 40rpx;
		color: #b3b3b3;
	}

	.iconweixinzhifu {
		color: #09BB07;
		padding-right: 20rpx;
	}

	.iconzhifubaozhifu1 {
		color: #007AFF;
		padding-right: 2rpx;
	}

	.pay-icon {
		font-size: 50rpx;
	}

	.choose {
		position: absolute;
		right: 0rpx;
		bottom: 0rpx;
		border-bottom: 18px solid #FF5551;
		border-left: 18px solid transparent;
	}

	.tittl-5-payway {
		height: 100rpx;
		border-radius: 50rpx;
		padding: 0 30rpx;
		margin-top: 20rpx;

	}

	.tittl-5-payway view {
		font-size: 34rpx;

	}

	.tittl-5-payway view:last-child {
		text-align: right;
	}

	.tittl-4 {
		color: #8c8c8c;
		font-size: 34rpx;
	}

	.tittl-1 view {
		color: #8c8c8c;
		font-size: 34rpx;
		padding: 20rpx 0;

	}

	.tittl-3 {
		margin-bottom: 20rpx;
	}

	.pay-input {
		background-color: #eaeaea;
		width: 98%;
		height: 80rpx;
		border-radius: 10rpx;
		-moz-user-select: none;
		-webkit-user-select: none;
		margin-bottom: 20rpx;
		font-size: 42rpx;
		padding: 0 10rpx;
	}

	.num text:first-child {
		color: #FF5551;

	}

	.num text:last-child {
		color: #adadad;

	}

	.num text {
		text-align: center;
	}

	.numActive {
		border: solid 2rpx #FF5551;
	}

	.numNotActive {
		border: solid 2rpx #adadad;
	}

	.num {
		width: 207rpx;
		height: 130rpx;
		margin: 10rpx;
		border-radius: 10rpx;
		position: relative;

	}

	.pay {
		padding: 0 30rpx;
		height: 100%;

	}
</style>
